<template>
	<view class="bg-white" style="width: 100%;">
		<text v-if="title&&title.length>0" class="text-xl text-bold text-black padding-bottom-xl padding-top">标题:{{title}}</text>
		<view v-for="(item,index) in dataList" :key="index" class="bg-white" style="width: 100%;">
			<view v-if="item.type=='text'" class="padding-top-xs padding-bottom-xs" style="width: 100%;">
				<text v-if="item.font_size_name=='xl'" :selectable="true" :user-select="true" :class="[item.is_bold?'text-bold':'']+' text-'+item.text_color" style="line-height: 55upx;letter-spacing: 3upx;font-size:36upx;">{{item.content}}</text>
				<text v-if="item.font_size_name=='lg'" :selectable="true" :user-select="true" :class="[item.is_bold?'text-bold':'']+' text-'+item.text_color" style="line-height: 55upx;letter-spacing: 3upx;font-size:32upx;">{{item.content}}</text>
				<text v-if="item.font_size_name=='df'" :selectable="true" :user-select="true" :class="[item.is_bold?'text-bold':'']+' text-'+item.text_color" style="line-height: 55upx;letter-spacing: 3upx;font-size:28upx;">{{item.content}}</text>
			</view>
			<view v-else-if="item.type=='big_image'" class="padding-top-xs padding-bottom-xs">
				<image @tap="ViewImage" :data-url="item.image.remote+'?imageView2/0/q/75'+waterMark"
					style="width: 100%;" class="bg-gray" :src="item.image.remote+'?imageView2/2/w/1000/h/1000/q/75'+waterMark"
					mode="widthFix">
				</image>
			</view>
			<view v-else-if="item.type=='small_image'" class="padding-top-xs padding-bottom-xs">
				<view :class="'grid grid-square flex-sub col-'+item.image_list.length" style="width: 100%;">
					<view class="bg-img bg-gray" v-for="(subItem,imgIndex) in item.image_list" :key="imgIndex" @click="ViewImage"
						:data-url="subItem.remote+'?imageView2/0/q/75'+waterMark" :data-listIndex="index">
						<image
							:src="subItem.remote+'?imageView2/2/w/400/h/400/interlace/1/q/75'" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view v-else-if="item.type=='video'" class="padding-top-xs padding-bottom-xs" style="width: 100%;">
				<video :src="item.url" :autoplay="false" controls objectFit="cover" :style="item.videoStyle"></video>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/api/config.js'
	import AudioPlayer from '@/components/audio-player.vue'
	export default {
		name:"RichContentDisplay",
		components: {
			AudioPlayer
		},
		data() {
			return {
				waterMark: '',
				windowWidth: 0,
				windowHeight: 0,
			};
		},
		created() {
			this.waterMark = config.waterMark
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.windowWidth = res.windowWidth
					that.windowHeight = res.windowHeight
				}
			})
		},
		props: {
			title:{
				type:String,
				default:null
			},
			dataList: {
				type: Array,
				default: []
			},
		},
		methods: {
			ViewImage(e) {
				console.log(e.currentTarget.dataset.url)
				//获取所有图片
				let allImages = []
				this.dataList.forEach(item=>{
					if(item.type == 'big_image') {
						allImages.push(item.image.remote+'?imageView2/0/q/75' + this.waterMark)
					}
					if(item.type == 'small_image') {
						item.image_list.forEach(subItem=>{
							allImages.push(subItem.remote+'?imageView2/0/q/75' + this.waterMark)
						})
					}
				})
				uni.previewImage({
					urls: allImages,
					current: e.currentTarget.dataset.url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss">
</style>
